<template>

  <div style=" margin-top:30px; margin-left:50px" v-loading="loading" >
    <el-button type="primary" @click="toservice()">返回</el-button>
    <span>上传图片介绍，也可以不传(只能上传jpg/png文件)</span><br><br>
    <img width="95" :src="service.photo">
    <el-upload 
    width="150"
      class="upload-demo"
      name="files"
      drag
      action="http://localhost:8080/oos/upload/image/service"
      :before-upload="beforeAvatarUpload"
      :on-success="handleSuccess"
      :limit="1"
      :show-file-list="false">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text" >将文件拖到此处，或<em>点击上传</em></div>
      <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
    </el-upload>
    <img width="95" :src="imgsrc" >
    <!-- <br> -->

    <!-- 选择类型 -->
    <div>
      <el-dialog
      title="选择服务类型"
      :visible.sync="dialogVisible1"
      align="center"
      width="40%">
    <servicetype @cancel="cancel" @confirmtype="confirmtype"></servicetype>
    </el-dialog>
     <el-button type="primary" @click="selecttype()">点击选择服务类型</el-button>
       &nbsp;&nbsp;<span>您选择的类型是：</span>&nbsp;&nbsp;
        <el-button type="success">{{this.servicetype.type}}</el-button>
    </div>
        <br>
<!-- 选择小区，多选 -->
  <el-dialog
      title="选择服务小区"
      :visible.sync="dialogVisible2"
      align="center"
      width="40%">
    <selectcommunities @cancel="cancel" @confirmcommunities="confirmcommunities"></selectcommunities>
    </el-dialog>
        <el-button type="primary" @click="selectcommunities()">点击选择服务小区</el-button>
       &nbsp;&nbsp;<span>您选择的小区是：</span><br><br>

        <el-table 
      :data="communities"
      border
      height="150"
      style="width: 350px;">
      <el-table-column
        prop="name"
        label="小区名称"
        width="140"
        align="center">
      </el-table-column>
      <el-table-column
       prop="address"     
        label="小区地址"
        width="200"
        align="center">
      </el-table-column>
    </el-table>
    <br>
    <el-button type="primary" @click="addservicedetail()">点击添加服务详情</el-button>
     <!-- 详情对话框 -->
        <el-dialog
      title="服务详情"
      :visible.sync="dialogVisible3"
       align="center"
      width="40%">
     <addservicedetail @cancel="cancel" @confirmservicedetail="confirmservicedetail"></addservicedetail>
    </el-dialog>
<!-- 添加成功提示框 -->
        <el-dialog
      title="提示"
      :visible.sync="dialogVisible4"
       align="center"
      width="40%">
      <span>添加成功！</span>
    <el-button type="primary" @click="cancel()">确 定</el-button>
    </el-dialog>

    <el-button type="primary" @click="addservice">确认添加</el-button>
  </div>
  
</template>
<script>
import servicetype from './Selectservicetype'
import selectcommunities from './Selectcommunities.vue'
import addservicedetail from './Addservicedetail.vue'
export default {
        data(){
           
        return {
        communities:[],
        loading: false,
        service:{
            uid:"",
            cid:"",
            id:"",
            photo:"",
            type:"",
            introduce:"",
            name:"",
            supportTime:"",
            price:"",
            status:1,
        },
            servicetype:{             
                id:"",
                type:"",
            },
        
        communities:[],
        
        // 窗口
        dialogVisible1:false,
        dialogVisible2:false, 
        dialogVisible3:false,     
        dialogVisible4:false,     
    imgsrc:""
      }
    },
    methods: {
      toservice:function(){
         this.$router.push("merchantservice")
      },
        //选择新增服务类型
        selecttype:function(){
            this.dialogVisible1=true;
        },
        confirmtype:function(servicetype){
            
            this.service.type=servicetype.id
            this.servicetype=servicetype
            // alert(this.service.type)
            this.dialogVisible1=false
        },
        // 选择新增服务所支持小区
        selectcommunities:function(){
            this.dialogVisible2=true
        },
        confirmcommunities:function(val){    
            this.communities=val
            this.dialogVisible2=false;        
        },
        addservicedetail:function(){
          this.dialogVisible3=true
        },
        confirmservicedetail:function(val){
          this.service.name=val.name
          this.service.introduce=val.introduce
          this.service.supportTime=val.supportTime
          this.service.price=val.price
           this.dialogVisible3=false;      
        },
        // 关闭窗口
        cancel:function(){
        this.dialogVisible1 = false
        this.dialogVisible2=false
        this.dialogVisible3=false
        this.dialogVisible4=false
        
      },
      addservice:function(){
        for(var i=0;i<this.communities.length;i++){
          this.$axios.post("http://localhost:8080/merchant/addservice/"+this.communities[i].id,this.service).then(res=>{
        if(res.data.status=="SUCCESS"){
          console.log("添加服务成功")
           this.dialogVisible4=true
           //重新加载
        }
      })
        }
      },
      beforeAvatarUpload: function(){
        this.loading = true;
      },
      handleSuccess: function(response){
        if(response.status == "SUCCESS"){
          // alert(response.data[0])
          this.service.photo=response.data[0]
           this.loading = false;
          return
        }
        else{
          this.loading = false;
          this.$message.error("文件上传失败")
        }
      }
    },
     mounted(){
    //    alert("用户id："+JSON.parse(window.sessionStorage.getItem("user")).id)
    },
    components:{
      servicetype,
      selectcommunities,
      addservicedetail
    },
    
}
</script>
<style>
</style>